<template>
    <div>
        <div class="border-bottom pd-b-10 mg-b-20">筛选</div>
        <div class="flex flex-jc-sb ">
            <div class="flex items-center">
                <div class="mg-r-20">
                    导出时间
                </div>
                <div>
                    <el-date-picker v-model="dateValue" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                        value-format="YYYY-MM-DD HH:mm:ss " end-placeholder="结束时间" @change="handleDatePickerChange" />
                </div>
            </div>
            <div>
                <el-button class="my_cancelbtn" @click="doExport('export1')" :loading="exportMap.export1.loading">
                    <el-icon class="el-icon--right">
                        <Upload />
                    </el-icon>
                    首充数据
                </el-button>
                <el-button class="my_cancelbtn" @click="doExport('export2')" :loading="exportMap.export2.loading">
                    <el-icon class="el-icon--right">
                        <Upload />
                    </el-icon>
                    销售数据
                </el-button>
                <el-button class="my_btn" v-show="filterType === 'dayPerMonth'" type="primary" @click="doExport('export3')"
                    :loading="exportMap.export3.loading">
                    <el-icon class="el-icon--right">
                        <Upload />
                    </el-icon>
                    导出列表
                </el-button>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import baseurl from 'api/env.ts'

import { saleFirstRechargeExport, insureCustomExport, longTermInsureListExport } from 'api/tools/insuranceData.ts'

const route = useRoute()

const dateValue = ref([])
const props = defineProps({
    filterType: {
        type: String,
    },
    startTime: {
        type: String
    },
    endTime: {
        type: String
    }
})

const emits = defineEmits(['dateChange'])

const handleDatePickerChange = (ev) => {
    emits('dateChange', ev)
}

watch(() => props.startTime, (newval) => {
    if (newval) {
        dateValue.value[0] = newval

        console.log(111, dateValue.value)
    }
}, {
    immediate: true
})

watch(() => props.endTime, (newval) => {
    if (newval) {
        dateValue.value[1] = newval
    }
}, {
    immediate: true
})

const exportMap = ref({
    // 首充导出
    export1: {
        loading: false,
        api: saleFirstRechargeExport
    },
    // 销售数据导出
    export2: {
        loading: false,
        api: insureCustomExport
    },
    // 长期保列表导出
    export3: {
        loading: false,
        api: longTermInsureListExport
    }
})

// 导出
const handleExport = (prop) => {
    if (exportMap.value[prop].loading) return
    exportMap.value[prop].loading = true
    exportMap.value[prop].api({
        startTime: dateValue.value[0] ?? '',
        endTime: dateValue.value[1] ?? ''
    }).then(res => {
        const href = baseurl + '/common/download?delete=true&fileName=' + res
        downLoad(href)
    }).finally(res => {
        exportMap.value[prop].loading = false
    })
}

const doExport = (prop) => {
    let hint = ''
    switch (prop) {
        case 'export1':
            hint = '是否导出公司首次充值数据?'
            break
        case 'export2':
            hint = '是否导出每日统计各个业务员长期保的业绩?'
            break
        case 'export3':
            hint = '是否确认导出数据?'
            break
    }
    ElMessageBox.confirm(
        hint,
        '提示',
        {
            type: 'warning',
        }
    ).then(res => {
        handleExport(prop)
    })
}

const downLoad = (href) => {
    const a = document.createElement('a')
    a.download = href
    a.href = href
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

</script>
<style lang="scss" scoped></style>